<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.a {
			width: 200px;
			height: 30px;
			border: 1px dotted red;
			position: relative;
		}

		.b {
			width: 0px;
			height: 30px;
			background-color: #FF0000;
		}

		span {
			position: absolute;
			top: 5px;
			left: 220px;
		}
	</style>
	<body>
		<div class="a">
			<div class="b">
			</div>
			<span>0</span>
		</div>
		<script src="./public0.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var a = document.getElementsByClassName("a")[0];
			var b = document.getElementsByClassName("b")[0];
			var c = document.querySelector("span");
			// console.log(a,b,c)
			var width = a.offsetWidth - 2;
			var time = setInterval(function() {
				b.style.width = b.offsetWidth + 2 + 'px';
				b.style.background = color()
				c.innerHTML = parseInt(b.offsetWidth / width * 100) + "%"
				if (
					b.offsetWidth == 200) {
					clearInterval(time)
				}
			}, 50)
		</script>
	</body>
</html>
